<template>
  <div :class="btnClass">
    <i v-if="icon"
      class="btn-icon"
      :class="theIcon"></i>
    <slot></slot>

  </div>
</template>

<script>
  export default {
    props: {
      icon: {
        type: String,
        default: null
      },
      size: {
        type: String,
        default: null
      },
      color: {
        type: String,
        default: null
      }
    },
    computed: {
      btnClass() {
        let name = 'text-button';
        if (this.size) {
          name = name + ' btn-' + this.size;
        }
        if (this.color) {
          name = name + ' btn-' + this.color;
        }
        return name;
      },
      theIcon() {
        return this.icon.indexOf('iconfont') > -1 ? `iconfont ${this.icon}` : this.icon;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .text-button {
    display: inline-block;
    padding: 12px 20px;
    font-size: 14px;
    color: $--primary-color;
    cursor: pointer;
    .btn-icon {
      margin-right: 5px;
    }
  }
  .btn-medium {
    padding: 10px 20px;
    font-size: 14px;
    // border-radius: 4px;
  }
  .btn-small {
    padding: 9px 15px;
    font-size: 12px;
    // border-radius: 3px;
  }
  .btn-mini {
    padding: 7px 15px;
    font-size: 12px;
    // border-radius: 3px;
  }

  .btn-success {
    color: $--success-color;
  }
  .btn-success:hover {
    color: $--success-hover;
  }
  .btn-warning {
    color: $--warning-color;
  }
  .btn-warning:hover {
    color: $--warning-hover;
  }
  .btn-danger {
    color: $--danger-color;
  }
  .btn-danger:hover {
    color: $--danger-hover;
  }
</style> 